<template>
  <div class="app-container home">
    <el-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
      <el-card class="box-card">
        <div class="chart-card-header">
          <div class="meta">
            <span class="chart-card-title">今日累计产量</span>
            <span class="chart-card-action">
              <slot name="action"></slot>
            </span>
          </div>
        </div>
        <div class="chart-card-content">
          <div class="content-fix">
            <slot>￥<span>{{depotHeadList[0].todaySale}}</span></slot>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
      <el-card class="box-card">
        <div class="chart-card-header">
          <div class="meta">
            <span class="chart-card-title">本月累计产量</span>
            <span class="chart-card-action">
              <slot name="action"></slot>
            </span>
          </div>
        </div>
        <div class="chart-card-content">
          <div class="content-fix">
            <slot>￥<span>{{depotHeadList[0].thisMonthSale}}</span></slot>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
      <el-card class="box-card">
        <div class="chart-card-header">
          <div class="meta">
            <span class="chart-card-title">今日累计报损</span>
            <span class="chart-card-action">
              <slot name="action"></slot>
            </span>
          </div>
        </div>
        <div class="chart-card-content">
          <div class="content-fix">
            <slot>￥<span>{{depotHeadList[0].todayBuy}}</span></slot>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
      <el-card class="box-card">
        <div class="chart-card-header">
          <div class="meta">
            <span class="chart-card-title">本月累计报损</span>
            <span class="chart-card-action">
              <slot name="action"></slot>
            </span>
          </div>
        </div>
        <div class="chart-card-content">
          <div class="content-fix">
            <slot>￥<span>{{depotHeadList[0].thisMonthBuy}}</span></slot>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-row>
      <el-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <div
          ref="salePriceListEcharts"
          class="echarts"
          style="width: 100%; height: 400px"
        ></div>
      </el-col>
      <el-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <div 
          ref="buyPriceListEcharts"
          class="echarts"
          style="width: 100%; height: 400px"
        ></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getBuyAndSaleStatistics } from "@/api/depot/head";
export default {
  name: "index",
  data() {
    return {
      depotHeadList:[]
    };
  },
  created() {
    this.getList();
    this.$nextTick(() => {
        this.getMerchantSelling("产量", this.$refs.salePriceListEcharts); //数据 调用方法
        this.getMerchantSelling("报损", this.$refs.buyPriceListEcharts); //数据 调用方法
    })
  },
  methods: {
    getList(){
      this.depotHeadList = [];
      this.depotHeadList.push({
        todaySale: 10,
        thisMonthSale: 24,
        todayBuy: 80,
        thisMonthBuy: 150

      })
      // getBuyAndSaleStatistics().then(response => {
      //     this.depotHeadList=response.data
  
      // })
    },
    //门店营收数据
    getMerchantSelling(statisticsStr, echartsParms) {
      //直接引用进来使用
      var echarts = require("echarts");
      

      // 基于准备好的dom，获取main节点init初始化echarts实例
      var myChart = echarts.init(echartsParms);
      // 指定图表的配置项和数据
      var option = {
        //显示滚动条
        // dataZoom: [
        //           {
        //             show: true,
        //             realtime: true,
        //             start: 0,
        //             end: 50
        //           },
        //           {
        //             type: 'inside',
        //             realtime: true,
        //             start: 0,
        //             end: 50
        //           }
        //         ],
        title: {
          text: statisticsStr + "统计（元）", //头部名称
          x: "center", //居中
        },
        tooltip: {},
        legend: {
          //图列的显示
          data: [statisticsStr + "统计"], //图列，就是显示在右侧的那个蓝色小方块
          top: "20", // legend 放置位置。
          right: "100", //右边100个像素位置
          orient: "vertical", // 纵向布局。
        },
        xAxis: {
          data: ["小猪A", "小马B", "小方C", "小人"], //x轴显示数据名称
          //X轴文字过长，隐藏。
          // axisLabel: {
          //   show: true,
          //   textStyle: {
          //     color: '#595C61'
          //   },
          //   rotate: 0, //文字旋转度数0为横向显示，90竖直显示文字
          //   formatter:function(value){
          //   				 if(value.length > 6){
          //                           return `${value.slice(0,5)}...`;
          //                    }
          //                    return value;
          //   			 }
          // },
          //x轴刻度相关
          axisTick: {
            alignWithLabel: true, //刻度居中对齐文字
            show: true,
            interval: 0,
          },
        },
        yAxis: {}, //y轴数据，不填它会自适应
        series: [
          {
            name: statisticsStr + "统计",
            type: "bar", //类型，bar柱形，line折线，pie饼图等等
            data: [5, 10, 15, 100], //柱条数据
            label: {
              //标签，
              show: true, //显示柱形头上的数字
              position: "outside", //显示在柱形头上
              color: "rgba(0, 0, 0, 1.0)", //文字颜色
            },
          },
        ],
        itemStyle: {
          // 设置柱形的颜色
          color: "#5099e6",
        },
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped lang="scss">
.el-col {
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 24px;
}
.chart-card-header {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.meta {
  position: relative;
  overflow: hidden;
  width: 100%;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 22px;
}

.chart-card-action {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}

.chart-card-footer {
  border-top: 1px solid #e8e8e8;
  padding-top: 9px;
  margin-top: 8px;

  > * {
    position: relative;
  }
}

.chart-card-header {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;
  font-size: 28px;
  &.center {
    text-align: center;
    padding: 0 32px;
  }
  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }
  p {
    line-height: 42px;
    margin: 0;
    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
.content-fix {
  font-size: 28px;
}
</style>

